<template>
  <div class="electron-signature-company" v-loading="loading">
    <el-image alt="" :src="qiyeIcon" class="qiye-icon" />
    <div class="account_box">
      <div class="account_title">
        <span class="account_title_name">企业电子签章认证</span>
        <span
          class="account_title_icon"
          :class="{'adopt': fddStatus, 'refuse': !fddStatus}"
        >
          <icon-font
            :icon="fddStatus ? `iconpc-alert_ywcrz1x`: `iconpc-alert_wrzsq1x`"
          ></icon-font>
          {{fddStatus ? '已认证': '未认证'}}
        </span>
      </div>
      <div class="account_prompt">开通企业电子签章，可用于业务盖章使用</div>
      <div>
        <el-button type="text" :loading="certification_loading" @click="goCertification" v-if="!fddStatus">
          <icon-font icon="iconpc-other_cxrzicon1x"></icon-font>
          {{ fddStatus ? '继续认证' : '去认证' }}
        </el-button>
        <el-button type="text" :loading="recertification_loading" @click="handlePersonalShow" v-if="fddStatusBoolean">
          <icon-font icon="iconpc-other_cxrzicon1x"></icon-font>
          {{ '重新认证' }}
        </el-button>
        <el-button type="text" @click="showSignDialog" v-if="fddStatus">
          <icon-font icon="iconpc-other_ylicon1x"></icon-font>
          {{ '电子签章预览' }}
        </el-button>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="showDialog" width="30%">
      <h1 class="text">重新认证确认</h1>
      <span>{{
        '企业认证' + this.cnfddStatus + '，是否确认进行重新认证？'
      }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="recertification_loading" @click="recertification">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="电子签章预览" :visible.sync="showPicDialog" width="30%">
      <span>{{ '企业电子签章名称: ' + this.sealName }}</span>
      <div class="image-div" style="display: flex; justify-content: center; margin-top: 20px;">
        <el-image :src="showPicUrl">
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dismissPicDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Gerenrenzheng from '@assets/personl/gerenrenzheng.png';
import Weirenzheng from '@assets/personl/weirenzheng.png';
import Yirenzheng from '@assets/personl/yirenzheng.png';
import Shuru from '@assets/personl/shuru.png';
import Qiye from '@assets/personl/pc-qyzx-dzqzsz-qy-icon.png';
import { getCompanyInfo } from '@const/api_authCenter.js';
import { openElectronicSignature } from '@const/api.js';
import { companyRepeatCertification } from '@const/api_interface.js';
import {
  getCompanySealName,
  getCompanySealStream
} from '@const/api_interfaceCenter';
import { hasIn } from 'lodash';
import { $loadFileSimply } from '@const/loadFileOps';
export default {
  name: 'ElectronSignatureCompany',
  data() {
    return {
      gerenrenzheng: Gerenrenzheng,
      weirenzheng: Weirenzheng,
      yirenzheng: Yirenzheng,
      shuru: Shuru,
      qiyeIcon: Qiye,
      fddStatus: null,
      fddStatusBoolean: null,
      showDialog: false,
      cnfddStatus: '',
      loading: false,
      showPicDialog: false,
      sealName: '',
      showPicUrl: '',
      recertification_loading: false,
      certification_loading: false
    };
  },
  created() {
    this.getCompanyInfo();
  },
  methods: {
    $loadFileSimply,
    // 电子签章预览
    showSignDialog() {
      this.showPicDialog = true;
      this.getPicName();
      this.loadFileSimplyByUrl(getCompanySealStream);
    },
    dismissPicDialog() {
      this.showPicDialog = false;
    },
    // 获取企业名称
    getPicName() {
      this.$axios({
        method: 'get',
        url: getCompanySealName
      }).then(res => {
        if (res.data.code === '0') {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {};
          if (obj.sealName) {
            this.sealName = obj.sealName;
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 获取电子签章文件
    loadFileSimplyByUrl(fileUrl, fileName = '') {
      if (!fileUrl)
        this.$message({
          type: 'warning',
          message: '文件资源丢失，请联系管理员！'
        });
      let param = {
        method: 'get',
        url: fileUrl,
        timeout: 30000
      };
      $loadFileSimply(param).then(res => {
        // 文件流
        // console.log('imageUrl:', URL.createObjectURL(new Blob([res])))
        this.showPicUrl = URL.createObjectURL(new Blob([res]));
      });
    },
    // 去认证
    goCertification() {
      this.certification_loading = true;
      this.$axios({
        url: openElectronicSignature,
        method: 'get'
      })
        .then(({ data }) => {
          this.certification_loading = false;
          if (data.payload) {
            window.open(data.payload);
          } else {
            this.$message({
              type: 'warning',
              message: '获取认证地址失败请联系管理员'
            });
          }
        })
        .finally(() => {
          this.certification_loading = false;
        });
    },
    // 重新认证
    handlePersonalShow() {
      if (this.fddStatus === 0) {
        this.recertification();
      } else {
        this.showDialog = true;
      }
    },
    handleClose() {
      this.showDialog = false;
    },
    //企业电子签章、去认证/重新认证
    recertification() {
      this.recertification_loading = true;
      this.$axios({
        method: 'get',
        url: companyRepeatCertification
      })
        .then(res => {
          this.recertification_loading = false;
          if (res.data.code === '0') {
            let obj = hasIn(res, 'data.payload') ? res.data.payload : {};
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank');
            }
          } else {
            this.$message.error(data.msg);
          }
        })
        .finally(() => {
          this.recertification_loading = false;
          this.showDialog = false;
        });
    },
    //获取公司信息认证状态
    getCompanyInfo() {
      this.loading = true;
      this.$axios({
        method: 'get',
        url: getCompanyInfo
      })
        .then(res => {
          if (res.data.code === '0') {
            let obj = hasIn(res, 'data.payload') ? res.data.payload : {};
            if (obj) {
              this.fddStatus =
                Number(obj.companyFddStatus) === 4 ? true : false;
              this.fddStatusBoolean =
                Number(obj.companyFddStatus) !== 0 ? true : false;
              if (obj.companyFddStatus === '0') {
                this.cnfddStatus = '未认证';
              } else if (obj.companyFddStatus === '1') {
                this.cnfddStatus = '管理员资料已提交';
              } else if (obj.companyFddStatus === '2') {
                this.cnfddStatus = '企业基本资料(没有申请表)已提交';
              } else if (obj.companyFddStatus === '3') {
                this.cnfddStatus = '已提交待审核';
              } else if (obj.companyFddStatus === '4') {
                this.cnfddStatus = '审核通过';
              } else if (obj.companyFddStatus === '5') {
                this.cnfddStatus = '审核不通过';
              } else if (obj.companyFddStatus === '6') {
                this.cnfddStatus = '人工初审通过';
              }
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="less">
.electron-signature-company {
  padding: 50px 0px 0px 40px;
  display: flex;
  .qiye-icon {
    width: 26px;
    height: 26px;
    margin: 20px;
  }
  .account_box {
    div {
      height: 30px;
      line-height: 30px;
    }
    .account_title {
      font-size: 16px;
      color: #333;
      .account_title_name {
        color: #333;
        margin-right: 17px;
      }
      .adopt {
        color: #9cd17c;
      }
      .refuse {
        color: #ffa84f;
      }
      .iconpc-alert_ywcrz1x {
        color: #9cd17c;
      }
      .iconpc-alert_wrzsq1x {
        color: #ffa84f;
      }
      i {
        font-size: 16px;
        margin-right: 7px;
      }
    }
    .account_prompt {
      width: 500px !important;
      color: #999;
      font-size: 14px;
    }
    .el-button {
      color: #4d84ff;
      // margin-right: 20px;
      // margin-left: -8px;
      cursor: pointer;
      i {
        font-size: 14px;
        // margin-right: 3px;
      }
    }
    .unauthenticated {
      color: #ffa84f;
      font-size: 14px;
      margin-left: 0 !important;
    }
    .isOk {
      color: #9cd17c;
      font-size: 14px;
      margin-left: 0 !important;
    }

    .gotosure span {
      margin-left: -5px;
    }
    .cuury_phone {
      color: #db5063;
      margin-left: 10px;
    }
    .we_chat {
      margin-right: 15px;
      color: #000;
    }
  }
  .weirenzheng,
  .shuru {
    width: 18px;
    height: 18px;
  }
  .shuru,
  .yirenzheng,
  .weirenzheng {
    width: 14px;
    height: 14px !important;
    margin-left: 12px;
    margin-right: 4px;
    margin-bottom: -2px;
  }
}
</style>
